// 注册路由组件
import React, {Component} from 'react'
import {Switch, Route, Redirect} from 'react-router-dom'
import Zhaopin from '../zhaopin/zhaopin'
import Qiuzhi from '../qiuzhi/qiuzhi'
import ZhaopinInfo from '../zhaopin-info/zhaopin-info'
import QiuzhiInfo from '../qiuzhi-info/qiuzhi-info'
import Message from '../message/message'
import Personal from '../personal/personal'
import Notfound from '../../components/not-found/not-found'
import {connect} from 'react-redux'
import Cookies from 'js-cookie'     // 可以操作前端cookie的对象 set() remove()
import {getRedirectTo} from '../../utils'
import {getUser} from '../../redux/action'
import {NavBar} from 'antd-mobile'
import NavFooter from '../../components/nav-footer/nav-footer'

export class Main extends Component{

    // 给组件对象添加属性
    navList = [
        {
            path: '/zhaopininfo',
            component: ZhaopinInfo,
            title:'招聘列表',
            icon:'faAddressBook',
            text:'招聘',
        },
        {
            path: '/qiuzhiinfo',
            component: QiuzhiInfo,
            title:'简历列表',
            icon:'faAddressCard',
            text:'求职'
        },
        {
            path: '/message',
            component: Message,
            title:'消息提示',
            icon:'faEnvelope',
            text:'消息'
        },
        {
            path: '/personal',
            component: Personal,
            title:'用户中心',
            icon:'faIdBadge',
            text:'个人'
        },
    ];

    componentDidMount(){
        // 如果有cookie 但user中没有_id 发请求获取对应的user
        const userid = Cookies.get('userid');
        const {_id} = this.props.user;
        if(userid && !_id){
            // 发送异步请求 获取user信息
            this.props.getUser();
        }
    }

    render(){

        // 读取cookie中的userid
        const userid = Cookies.get('userid');
        // 如果有 读取redux中的user状态
        if(!userid){
            return <Redirect to={'/login'}/>
        }
        const {user} = this.props;
        // 如果user没有_id 返回null(不做任何显示)
        if(!user._id){
            return null
        }else{
            // 如果有_id 显示对应的界面
            const path = this.props.location.pathname;
            if(path === '/'){
                // 得到一个重定向的路径
                let path = getRedirectTo(user.header, user.type);
                return <Redirect to={path}/>
            }
        }

        // 检查用户是否登录 如果没有 自动重定向到登录界面
        // const {user} = this.props;
        // if(!user._id){
        //     return <Redirect to={'/login'}/>
        // }

        const {navList} = this;
        const path = this.props.location.pathname; // 请求的路径
        const currentNav = navList.find(nav => nav.path === path);  // 得到当前的nav 可能没有

        if(currentNav){
            // 决定哪个路由需要隐藏
            if(user.type === 'zhaopin'){
                // 隐藏招聘信息
                navList[0].hide = true;
            } else if (user.type === 'qiuzhi') {
                navList[1].hide = true;
            }
        }

        return(
            <div>
                {currentNav ? <NavBar>{currentNav.title}</NavBar> : null}
                <Switch>
                    {
                        navList.map(nav => <Route path={nav.path} component={nav.component}/>)
                    }
                    <Route path={'/zhaopin'} component={Zhaopin}/>
                    <Route path={'/qiuzhi'} component={Qiuzhi}/>
                    <Route component={Notfound}/>
                </Switch>
                {currentNav ? <NavFooter navList={navList}/> : null}
            </div>
        )
    }
}

export default connect(
    state => ({user:state.user}),
    {getUser}
)(Main)

// 实现自动登录
//  1. 如果cookie中有userid 发请求获取对应的user 暂时不做任何显示
//  2. 如果cookie中没有userid 跳转到登录界面
//  3. 如果已经登录 若请求根路径 根据user的两种值 type和header 来决定重定向的根路径并自动跳转
